<template>
    <!-- components/scaleBanner/index.wxml -->
    <view>
        <swiper class="carousel" :circular="true" :autoplay="autoplay" :duration="200" :display-multiple-items="pageCount" :current="startIndex" @change="swiperChange">
            <swiper-item class="swiper-item" v-for="(item, index) in imgs" :key="index">
                <image
                    :src="item.imgId"
                    :class="'carousel-image ' + (centerIndex == index ? 'active' : 'quiet')"
                    mode="scaleToFill"
                    @tap="onImageClickFun"
                    :data-item="item"
                    :data-index="index"
                />
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
// components/scaleBanner/index.js
export default {
    data() {
        return {
            /**
             * 一组图片的首个位置
             */
            startIndex: 0,
            /**
             * 中间选中的图片位置
             */
            centerIndex: 0
        };
    },
    props: {
        pageCount: {
            type: Number,
            default: 3
        },
        autoplay: {
            type: Boolean,
            default: false
        },
        imgs: {
            type: Array,
            default: () => [
                {
                    imgId: 'https://img0.baidu.com/it/u=2779110240,3642465580&fm=253&fmt=auto&app=138&f=JPEG?w=502&h=500'
                },
                {
                    imgId: 'https://img0.baidu.com/it/u=1060447734,1055779130&fm=253&fmt=auto&app=138&f=JPEG?w=490&h=623'
                },
                {
                    imgId: 'https://bpic.51yuansu.com/pic3/cover/03/16/91/5b5bb385c62a8_610.jpg'
                },
                {
                    imgId: 'https://img0.baidu.com/it/u=4236572794,423089115&fm=253&fmt=auto&app=138&f=JPEG?w=610&h=457'
                },
                {
                    imgId: 'https://img1.baidu.com/it/u=3430992867,614567689&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
                },
                {
                    imgId: 'https://img1.baidu.com/it/u=1980675771,1499187320&fm=253&fmt=auto&app=138&f=JPEG?w=416&h=500'
                },
                {
                    imgId: 'https://bpic.588ku.com/element_origin_min_pic/16/07/07/23577e72b5e6aef.jpg'
                }
            ]
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    methods: {
        attached() {
            this.setData({
                startIndex: 0,
                centerIndex: this.getCenterItemFun(0)
            });
        },

        swiperChange: function (e) {
            // 获取到屏幕中第一张图的位置
            let current = e.detail.current;
            this.setData({
                startIndex: current,
                centerIndex: this.getCenterItemFun(current)
            });
        },

        /**
         * 根据开始值计算中间值
         */
        getCenterItemFun(start) {
            let total = this.imgs.length;
            return (start + Math.floor(this.pageCount / 2)) % total;
        },

        /**
         * 根据中间位置值计算开始值
         */
        getStartItemFun(center) {
            let total = this.imgs.length;
            let start = center - Math.floor(this.pageCount / 2);
            if (start < 0) {
                start = total + start;
            }
            return start;
        },

        /**
         * banner点击
         */
        onImageClickFun(e) {
            let item = e.currentTarget.dataset.item;
            let index = e.currentTarget.dataset.index;
            // console.log(item.imgId,index);
            this.setData({
                centerIndex: index,
                startIndex: this.getStartItemFun(index)
            });
        }
    },
    created: function () {}
};
</script>
<style>
@import './index.css';
</style>
